<template>
  <div>
    <a-row type="flex" justify="start">
      <a-col :span="4">
        <a-button type="primary" @click="handleAddProductModalShow('新增商品', null)">
          新增商品
        </a-button>
      </a-col>
    </a-row>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :row-key="(record) => record.id"
      :pagination="paginationRef"
    >
      <template #picUrl="{ record }">
        <a-image :width="88" :src="record.picUrl" />
      </template>
      <template #price="{ record }">
        <span>{{ record.price }}元</span>
      </template>
      <template #memberPrice="{ record }">
        <span>{{ record.memberPrice }}元</span>
      </template>
      <template #publishStatus="{ record }">
        <span v-if="record.publishStatus == 0">未上架</span>
        <span v-if="record.publishStatus == 1">已上架</span>
      </template>
      <template #operation="{ record }">
        <a-button type="primary" ghost>编辑</a-button>
        <a-popconfirm title="确认要删除吗">
          <a-button type="danger" ghost>删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from '@vue/runtime-core'
import { reactive, toRaw } from 'vue'
import { ProductPageQuery, ProductPageRes } from '@/model/product/ProductPage'
import { page } from '@/api/product/product'
import { Pagination } from '@/model/base/Pagination'
const columns = [
  { title: '商品编码', dataIndex: 'productNo' },
  {
    title: '商品图片',
    dataIndex: 'picUrl',
    slots: { customRender: 'picUrl' },
  },
  { title: '商品名称', dataIndex: 'productName' },
  {
    title: '商品价格',
    dataIndex: 'price',
    slots: { customRender: 'price' },
  },
  {
    title: '会员价格',
    dataIndex: 'memberPrice',
    slots: { customRender: 'memberPrice' },
  },
  {
    title: '是否上架',
    dataIndex: 'publishStatus',
    slots: { customRender: 'publishStatus' },
  },
  { title: '生产日期', dataIndex: 'productionDate' },
  { title: '商品描述', dataIndex: 'description' },
  {
    title: '操作',
    dataIndex: 'operation',
    slots: { customRender: 'operation' },
  },
]

export default defineComponent({
  name: 'Product',
  setup() {
    // 查询
    const dataSource = ref<Array<ProductPageRes>>([])
    const menuQuery = reactive<ProductPageQuery>(new ProductPageQuery())
    menuQuery.current = 1
    menuQuery.size = 10
    const paginationRef = reactive<Pagination>({
      currentKey: 'current',
      pageSizeKey: 'size',
      total: 0,
    })
    const onQuery = async () => {
      const pageRes = await page(toRaw(menuQuery))
      dataSource.value = pageRes.records
      paginationRef.total = pageRes.total
    }
    onQuery()

    return {
      columns,
      dataSource,
      paginationRef,
    }
  },
})
</script>
<style></style>
